<template>
<div>
  <div ref="printCard" style="display: flex;align-items: center;height: 220px;width:210px;overflow: hidden;" v-for="item in dataList" :key="item.id">
    <div style="font-size: 7px; font-weight: 200;">
      <div style="font-size: 10px; font-weight: bold;">食品名称：{{item.foodName}}</div>
      <div style="font-size: 6px;line-height: 8px;">配料表：{{item.ingredient}}</div>
      <div style="font-size: 8px; font-weight: bold;">净含量：{{item.netContent}}</div>
      
      <div style="display: flex; align-items: center; margin: 2px 0;">
        <div style="flex:1; margin-right: 2px;width: 50%;">
          <div>生产日期：{{item.itemData && item.itemData.deliveryStartTime.slice(0,10)}}</div>
          <div>保质期：{{item.term}}</div>
          <div>加工方式：{{item.processingMode}}</div>
          <div>产品类别：{{item.productCategory}}</div>
          <div>贮存条件：{{item.storageConditions}}</div>
          <div>食用方法：{{item.edibleMethods}}</div>
          <div>生产商：{{item.warehouseAddress}}</div>
          <div>联系方式：{{item.contactInformation}}</div>
          <div>食品生产许可证编号：{{item.licence}}</div>
          <div>产品执行标准：{{item.executiveStandards}}</div>
        </div>

        <table cellspacing="0" border="1" style="font-size: 7px;border-collapse: collapse; flex:1;">
          <th colspan="3">营养成分表</th>
          <tr style="">
            <td>项目</td>
            <td>每100克（g）</td>
            <td>NRV%</td>
          </tr>
          <tr v-for="(item, index) in item.goodsSkuProductionNutrientsList" :key="index" style="">
            <td style="padding: 1px">{{ item.item }}</td>
            <td style="padding: 1px">{{ item.content }}</td>
            <td style="padding: 1px">{{ item.percentage }}</td>
          </tr>
        </table>
      </div>

      <div>地址：{{item.salesOrganizationName}}</div>
      <div>致敏物质提示：{{item.sensitizerTips}}</div>
    </div>
  </div>
  
</div>
</template>

<script>
import getLodop from '@/lodop/LodopFuncs';
export default {
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
    async print(isOpenPrintPreview, printer) {
      const LODOP = getLodop()
      if (LODOP) {
        const printCards = this.$refs.printCard
        
        // LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', htmlStr) //设置打印内容
        if (printCards && printCards.length) {
          LODOP.PRINT_INIT('') //初始化
          LODOP.SET_PRINT_PAGESIZE(0, '60mm', '60mm', '')
          LODOP.SET_PRINT_MODE('CUSTOM_TASK_NAME', '生产-下午茶配料表')// 打印任务名
          printCards.forEach(item => {
            LODOP.NewPage()
            LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', item.outerHTML) //设置打印内容
          })
          // LODOP.NewPage()
          // LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', printCards[0].outerHTML) //设置打印内容
        }

        CLODOP.On_Return = () => {
        }

        LODOP.SET_PRINTER_INDEX(printer);
        if (isOpenPrintPreview) {
          LODOP.PREVIEW();
        } else {
          LODOP.PRINT()
        }
      }
    }
  },
  mounted() {
  },
};
</script>

<style lang='scss'>
</style>
